@tailwind base;
@tailwind components;
@tailwind utilities;

@import './highlight.scss';

html {
  font-size: 12px;
  // scrollbar-color: transparent transparent;
}

::-webkit-scrollbar {
  width: 14px;
  height: 14px;
  border-radius: 7px;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.5);
  background-clip: padding-box;
  border: 6px solid transparent;
  border-radius: 14px;
}

body {
  --dark-txt: #000;
  --alt-txt: #fff;
  --med-dark: #111;
  --txt-col: #222;
  --med-txt: #3c3c3c;
  --comp-txt: #ddd;
  --comp-clr: #e6e6e6;
  --gray-txt: #555;
  --sat-txt: #777;
  --clrPrm: #0067c0;
  --wintheme: #eee;

  --txt_clr-rgb: 0 0 0;
  --base_bg-rgb: 243 243 243;

  --fakeMica: #f3f3f3 radial-gradient(#eff4f9 75%, #f3f3f3 100%) no-repeat fixed;
}

body::-webkit-scrollbar {
  --scroll: rgb(44 44 44 / 80%);
}

.edgeBrowser {
  --bg0: #e7eaec;
  --bg1: #f7fafc;
  --ipbar: #fefefe;
  --shd: rgba(80, 80, 80, 0.2);
  background: var(--bg0);
}

.wnterm {
  background: rgb(16, 16, 16);
}

.notepad {
  --bg1: #f9f9f9;

  background: var(--fakeMica);
  color: var(--dark-txt);

  .restWindow {
    background: var(--bg1);
  }
}

.calcApp {
  --bg1: rgb(243, 243, 243);
  --bg2: #ffffff;
  --bg3: #f9f9f9;
  --err-bg: rgb(255, 255, 255, 0.1);
  --err-txt: #999;

  background: var(--fakeMica);
  color: var(--dark-txt);
}

.whiteBoard {
  background: var(--comp-txt);
}

.spotify {
  background: rgb(24, 24, 24);
}

.settingsApp {
  --bg: #f3f3f3;

  background: var(--fakeMica);
  color: rgb(var(--txt_clr-rgb));
  min-width: 720px;
}

.discordWn {
  background: #36393f;
}

.lightWindow {
  background: #fff;
}

.wnCam {
  background: #060606;
}

.msfiles {
  --bg1: #ffffff;
  --bg2: #f5f5f5;
  --dsb-col: #aaa;
  --gray1: #bbb;
  --gray2: #ddd;
  --hover-bg: rgba(0, 178, 255, 0.16);
  --focus-bg: rgba(0, 183, 255, 0.25);
}

.icon {
  width: 16px;
  height: 16px;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
